<html>
  <head>
    <title>UseCounter Features Test</title>
    <style>
      div {
        animation-duration: 3s;
        animation-name: test;
      }

      @keyframes test {
        from {
          margin-left: 100%;
          width: 300%;
        }

        to {
          margin-left: 0%;
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <div id="div">This is a div</div>
    <link href="data:text/css,#foo { color: red; }" rel="stylesheet">
    <p id="para" style="font-size:50px; font-family:serif;">TEST</p>
    <div id="fullscreen">This is a div</div>
  <script type="text/javascript">
  for (var i = 0; i < 3; i++) {
    document.getElementById("div").animate([
        { transform: 'translateY(0px)' },
        { transform: 'translateY(-300px)' }
    ]);
    document.getElementById("para").firstChild.wholeText;
    navigator.vibrate(10);
  }

  // Try to access fullscreen feature. This should trigger a permissions policy
  // violation.
  document.getElementById('fullscreen').requestFullscreen()
    .then(() => console.error("Fullscreen should not be allowed in this document"))
    .catch(e => console.error(e));

  </script>
  <img src="http://example.test"/>
  <audio controls><source src="http://example.test" type="audio/mpeg"></audio>
  <video controls id="testvideo"><source src="http://example.test" type="video/mp4"></video>
  </body>
</html>
